<!--
 * @Descripttion: 评价操作
 * @Author: 王灿
 * @Date: 2019-12-18 14:55:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-03-04 21:23:19
 -->
<template>
  <div class="evaluate-operate">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <!-- 评价人 -->
      <el-form-item prop="evaluater">
        <el-input v-model="ruleForm.evaluater" placeholder="评价人" clearable></el-input>
      </el-form-item>
      <!-- 选择商品 -->
      <el-form-item prop="productId">
        <el-select v-model="ruleForm.productId" filterable remote reserve-keyword clearable placeholder="请选择商品" :remote-method="onGetProductList">
          <el-option
            v-for="(item,i) in productList"
            :key="i"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 评价内容 -->
      <el-form-item prop="evaluateContent">
        <el-input v-model="ruleForm.evaluateContent" placeholder="评价内容" clearable></el-input>
      </el-form-item>
      <!-- 是否好评 -->
      <el-form-item prop="goodMark">
        <el-select v-model="ruleForm.goodMark" filterable remote reserve-keyword clearable placeholder="请选择是否好评" :remote-method="onGetProductList">
          <el-option
            v-for="(item,i) in goodMarkList"
            :key="i"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 评价等级 -->
      <el-form-item prop="starClass">
        <el-select v-model="ruleForm.starClass" filterable remote reserve-keyword clearable placeholder="请选择评价等级" :remote-method="onGetProductList">
          <el-option
            v-for="(item,i) in starClassList"
            :key="i"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 上传组件 -->
        <el-form-item>
          <jq-upload :upData="mainPicObj" :fileList="mainPic" @onChangeImageKey="onChangeImageKey" />
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
      <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getProductList, getDownUrl } from '@/api/commodity.js'
import { getEvaluateAdd, getEvaluateUpdate } from '@/api/order.js'
import JqUpload from '@/components/jq-upload/index.vue'
export default {
  name: 'EvaluateOperate',
  props: {
    // 默认数据
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: { JqUpload },
  data() {
    return {
      ruleForm: {
        id: '',
        productId: '',
        evaluater: '',
        starClass: '',
        goodMark: 1,
        evaluateContent: '',
        pic: ''
      },
      rules: {
        productId: [{ required: true, message: '请选择商品', trigger: 'blur' }],
        evaluater: [{ required: true, message: '请输入评价人', trigger: 'blur' }],
        starClass: [{ required: true, message: '请选择星级', trigger: 'blur' }],
        evaluateContent: [{ required: true, message: '请输入评价内容', trigger: 'blur' }],
        pic: [{ required: true, message: '请上传评价图片', trigger: 'blur' }]
      },
      productList: [],
      goodMarkList:  [
        {label: '差评', value: 0},
        {label: '好评', value: 1}
      ],
      starClassList: [
        {label: '1星', value: 1},
        {label: '2星', value: 2},
        {label: '3星', value: 3},
        {label: '4星', value: 4},
        {label: '5星', value: 5}
      ],
      mainPicObj: {
        label: '评价图片',
        accept: 'image/png, image/gif, image/jpg, image/jpeg',
        limit: 3,
        type: 1,
        isImage: true
      },
      mainPic: []
    }
  },
  watch: {
    // 监听数据改变清空已输入值
    row() {
      this.onGetDefaultRow()
    }
  },
  created() {
    this.onGetDefaultRow()
  },
  methods: {
    // 获取默认值
    onGetDefaultRow() {
      this.mainPic = []
      let boolean = JSON.stringify(this.row) !== '{}'
      this.ruleForm = {
        id: boolean ? this.row.id : '',
        productId: boolean ? this.row.productId : '',
        evaluater: boolean ? this.row.evaluater : '',
        starClass: boolean ? this.row.starClass : '',
        goodMark: boolean ? this.row.goodMark : 1,
        evaluateContent: boolean ? this.row.evaluateContent : '',
        pic: boolean ? this.row.pic : '',
      }
      this.onGetProductList(this.ruleForm.productName)
      if (boolean && this.ruleForm.pic !== '') {
        let _resultPic = this.row.pic.split(',')
        _resultPic.forEach(pic => {
          // 下载图片
          getDownUrl({
            fileName: pic
          }).then(res => {
            this.mainPic.push({ name: pic, url: res.data.url.split("?")[0] })
          })
        })
      }
    },
   // 获取所有商品
    onGetProductList(query) {
      this.productList = []
      getProductList({
        name: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.name
          this.productList.push(params)
        })
      })
    },
    // 子组件传值
    onChangeImageKey(fileName, type, isDetele, url) {
      // 是否删除
      if (isDetele) {
        if (this.ruleForm.pic.indexOf(',') === 0) {
          this.ruleForm.pic = this.ruleForm.pic.substr(1).split(',').filter(value => value !== fileName).join(',')
        } else {
          this.ruleForm.pic = this.ruleForm.pic.split(',').filter(value => value !== fileName).join(',')
        }
        this.mainPic = this.mainPic.filter(item => item.name !== fileName)
      } else {
        if (type === 1) {
          this.ruleForm.pic += ',' + fileName
          if (url) {
            this.mainPic.push({name: fileName, url: url})
          }
        }
      }
    },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.pic.indexOf(',') === 0) {
            this.ruleForm.pic = this.ruleForm.pic.substr(1)
          }
          if (this.row.id) {
            getEvaluateUpdate(this.ruleForm).then(() => {
              this.$message.success('编辑成功')
            })
          } else {
            getEvaluateAdd(this.ruleForm).then(() => {
              this.$message.success('新增成功')
            })
          }
          this.onRefresh()
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false }
      this.$emit('addTableRow', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        this.$emit('onChangeRefresh')
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluate-operate {
  .el-form {
    margin-top: 30px;
    .el-form-item {
      margin-bottom: 22px;
      .el-input {
        &.el-input--suffix {
          margin-right: 0;
        }
      }
    }
  }
}
</style>